Hovering Button

The hover effect on buttons can be pretty neat. Enjoy playing around with the margins to change how far this button moves when the mouse is over it! Adjust the length of the transition to make it slower or faster in moving too!

How to Code it!

HTML

<button>Hovering Button</button>

CSS

button { color: #d3d3d3; background-color: black; border: none; border-radius: 100px; transition: all 0.3s ease 0s; height: 50px; width: 200px; } button:hover { margin-left: 10px; margin-top: 10px; color: black; background-color: #d3d3d3; }